<template>
	<view>
		<cu-custom :isBack="true">
			<block slot="backText">{{hid}}
			</block>
		</cu-custom>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" :up="upOption"
			@up="pageGetCameraImg">
			<view v-for="(arrItem,arrIndex) in pictureList" :key="arrIndex">
				<view v-for="(item,index) in arrItem" :key="index">
					<view class="cu-card case">
						<view class="cu-item shadow">
							<view class="image">
								<image :src="item.picturePath" mode="widthFix"></image>
								<view class="cu-tag text-white" :style="{backgroundColor:themeConfig.primaryColor}">
									{{$t('camera')}}
								</view>
							</view>
							<view class="cu-list menu-avatar">
								<view class="cu-item">
									<view class="cu-avatar round lg">
										<view class="cuIcon-deletefill margin" @tap="deleteCameraImg(item)"></view>
									</view>
									<view class="content flex-sub">
										<view class="text-grey">{{hid}}</view>
										<view class="text-gray text-sm flex justify-between">
											{{$t('picture') + arrIndex +'-'+ index}}
											<view class="text-gray text-sm">
												<text>{{ formatDateTime(item.createdDate) }}</text>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>
<script>
	import {formatDateTime} from '@/util/formatTime.js'
	import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
	import *
	as deviceCameraApi from '@/api/camera/cameraApi.js'
	export default {
		name: 'cameraPicture',
		mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
		data() {
			return {
				pictureList: [],
				cameraId: null,
				hid: null,
				currentPage: 1,
				pageSize: 5,
				downOption: {
					use: true,
					auto: false //是否在初始化后,自动执行downCallback; 默认true
				},
				upOption: {
					page: {
						size: 5 // 每页数据的数量,默认10
					},
					use: true,
					auto: false,
					empty: {
						tip: '暂无相关数据'
					}
				},
			}
		},
		computed: {
			themeConfig() {
				return this.$store.state.themeConfig
			}
		},
		onLoad(option) {
			this.cameraId = option.cameraId
			this.hid = option.hid
			this.pageGetCameraImg()
		},
		methods: {
			formatDateTime(timestamp) {
				return formatDateTime(timestamp, this.$t('unKnow'))
			},
			deleteCameraImg(item) {
				deviceCameraApi.deleteCameraImg({
					imgId: item.imgId
				}).then((res) => {
					if (res.data) {
						const {
							total,
							data,
							currentPage
						} = res.data
						this.currentPage = 1
						this.pictureList = []
						this.mescroll.scrollTo(0, 300)
						this.mescroll.resetUpScroll()
						this.pageGetCameraImg()
					} else {
						this.pictureList = []
					}
				})
			},
			downCallback() {
				this.currentPage = 1
				this.pictureList = []
				this.mescroll.resetUpScroll()
			},
			pageGetCameraImg() {
				deviceCameraApi.pageGetCameraImg({
					cameraId: this.cameraId,
					currentPage: this.currentPage,
					pageSize: this.pageSize,
				}).then((res) => {
					if (res.data) {
						const {
							total,
							data,
							currentPage
						} = res.data
						this.mescroll.endBySize(data.length, total)
						let index = currentPage - 1
						this.$set(this.pictureList, index, data)
						this.currentPage = currentPage + 1
					} else {
						this.pictureList = []
					}
				})
			}
		}
	}
</script>

<style>

</style>
